<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.min.js" ></script>
  <script type="text/javascript">
   $(document).ready(function() {


              $(".you").click(function() {
                  $(".no_all").show();

              })
             $(".no_foot").click(function() {
                  // var index = $(this).index();
                  $(".no_all").hide();

              })



          })
   // animated
  </script>
      <style>
      body {
          padding-top: 1.5rem;
      }

      .header {
          width: 93%;
          height: 2.5rem;
          line-height: 2.5rem;
          padding: 0.5rem 0.8rem;
          text-align: center;
          background-color:#40cccc;
      }

      .header_img{
        width: 6%;
        height: 45%;
        float: left;
        margin-top: 0.5rem;
      }

      .header_img img {
          width: 100%;
          height: 100%;
      }

      .header h3 {
          line-height: 3rem;
          margin: 0 auto;
          color: #fff;
      }
    .man{
      width: 100%;
    height:100%;
    position: fixed;
      padding: 1rem 0rem;
      background-color: rgb(243, 243, 243, 0.5);
    }
    .nav{
      width: 90%;
      height: 2.5rem;
      line-height: 2.5rem;
      padding: 0.5rem 1rem;
      color:orange;
      background-color: #fff;
      margin-bottom: 0.5rem;
    }
    .nav p{
      float: left;
    }
    .now{
      width: 90%;
      height: 7rem;
      padding: 0.5rem 1rem;
      background-color: #fff;
    }
    .now h5{
      width: 100%;
      height: 1.5rem;
    }
    .one_top{
      width: 90%;
      height: 2rem;
      padding: 0.5rem 1rem;
      border-top: 1px dashed rgb(243, 243, 243, 0.5);;
    }
    .top_img{
      width: 10%;
      height: 80%;
      float: left;
    }
      .top_img img{
        width: 100%;
        height: 100%;
      }
    .one_top h4{
      float: left;
      margin-left: 0.5rem;
      height: 2rem;
      line-height: 2rem;
    }
    .top_imgs{
      float: right;
      width: 8%;
      height: 45%;
      }
      .top_imgs img{
        width: 100%;
        height: 100%；
      }
      .footer{
        width: 95%;
        height: 3rem;
        background-color: #40cccc;
        color: #fff;
        text-align: center;;
        line-height: 3rem;
      border-radius: 0.5rem;
      margin: 1rem auto;
      }
      .main_imgs {
          width: 9%;
          height:45%;
          /*margin-left: 0.2rem;*/
          margin-top: 0.25rem;
          float: right;

      }

      .main_imgs img {
          width: 100%;
          height: 100%;
      }
      .no_all{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.7);
        z-index: 9;
        position: fixed;
          display: none;
          overflow: hidden;
      }
      .main_no{
        width:100%;
      height:70%;
      overflow: auto;
        background-color: #fff;
        z-index: 999;
        position: fixed;
        bottom: 0rem;
        border-top-left-radius: 1rem;
        border-top-right-radius:1rem;
      }
      .no_foot{
        width: 90%;
        height: 2.5rem;
        line-height: 2.5rem;
        background-color: #40cccc;
        /*margin: 0.2rem auto;*/
        color: #fff;
        text-align: center;
        border-radius: 1rem;
        letter-spacing:0.2rem;
        bottom: 0.2rem;
        left: 1rem;
        z-index: 999;
        /*margin-top: 1.5rem;*/
        position: fixed;

      }
      .no_top {
          width: 90%;
          /*height: 90%;*/
            padding-top: 1rem;
          margin: 0 auto 3rem;
      }

      .no_noe {
          width:90%;
          height: 6rem;
          margin-bottom: 0.8rem;
          border-radius: 0.5rem;
          /*margin: 0.8rem auto 1rem;*/
      }

      .no_img {
          width: 90%;
          height: 6rem;
          margin: 0 auto;
          position: absolute;
          /*padding: 1rem 0.8rem;*/
      }

      .no_img img {
          width: 100%;
          height: 100%;
      }

      .no_text {
          position: relative;
          top: 20%;
          z-index: 999;
          margin-left: 1.2rem;
          float: left;
          /*margin-top: 1rem;*/
      }

      .no_w {
          position: relative;
          margin-top: 2rem;
          left:5%;
          width: 22%;
          border-radius: 1rem;
          height: 2rem;
          line-height: 2rem;
          text-align: center;
          background-color: #40cccc;
          color: #fff;
          float: right;
      }
      .you{
        width: 50%;
        float: right;
        height: 2.5rem;
      }
      </style>
  </head>
  <body>
    <!-- 隐藏 -->
  <div class="no_all" style="height:100%;" >
    <div class="main_no">
      <div class="no_top" id="curj">
          <!-- <div class="no_noe">
              <div class="no_img">
                  <img src="../image/a19.png" alt="">
              </div>
              <div class="no_text">
                  <p style="color:red;font-size:2rem;"><span style="font-size:0.9rem;">￥</span>500</p>
                  <p style="color:#ccc;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">111</p>

              </div>
              <div class="no_w">
                  <p style="font-size:0.9rem">立即使用</p>
              </div>
          </div> -->

      </div>
      <div class="no_foot">
        完成
      </div>
    </div>
  </div>
    <div class="header">
        <div class="header_img">
            <img src="../image/a9.png" alt="" onclick="closewin()">
        </div>
        <h3>付款</h3>
    </div>
    <div class="man">
      <div class="nav">
        <p>支付金额</p>
        <p style="float:right;font-size:1.2rem;" id="price"></p>
      </div>

      <div class="now">
        <h5>支付方式</h5>
        <div class="one_top"  onclick="set(0)">
            <div class="top_img">
              <img src="../image/u20.png">
            </div>
            <h4>微信支付</h4>
            <div class="top_imgs">
              <img src="../image/u24.png" id="wxpay">
            </div>
        </div>
        <div class="one_top" onclick="set(1)">
            <div class="top_img">
              <img src="../image/u22.png">
            </div>
            <h4>支付宝</h4>
            <div class="top_imgs">
              <img src="../image/u25.png" id="zfbpay">
            </div>
        </div>

      </div>
      <div class="nav" style="color:#000;margin-top:0.5rem;" id="juan">
        <p >使用优惠券</p>

      <div class="you">
        <div class="main_imgs">
            <img src="../image/uu7.png" width="3rem" height="5rem">
        </div>
          <p style="float:right;font-size:1rem;" id="price">共<span id="juans">0</span>张优惠券</p>
      </div>
      </div>
      <div class="footer" onclick="pay2()">
        支付
      </div>
    </div>
  </body>
  <script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
  <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript">
  var price
  var orderid
  var juan_id
  var userinfo = $api.getStorage('userinfo');
  var juannum = 0
  var pay_price
  var pay_param
      apiready = function(){
        price = api.pageParam.price
        pay_price = api.pageParam.price
        orderid = api.pageParam.orderid
        $("#price").html('￥'+price)
        alert('请尽快支付,避免位置被抢')
        api.sendEvent({
            name: 'pay_msg',
        });

        get_yhj()

      };

      function get_yhj() {
        var html =''
        var obj = $api.byId('curj');

        api.ajax({
            url: SITE_URL+'user_api/coupon/get_myyhj',
            method: 'post',
            data: {
                values: {
                    user_id: userinfo.id,
                    order_id:orderid
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                if(ret.data.length>0){
                  for (var i = 0; i < ret.data.length; i++) {
                    juannum +=1
                    var dat = ret.data[i]
                    html +='<div class="no_noe">'
                    html +='<div class="no_img">'
                    html +='<img src="../image/a19.png" alt="">'
                    html +='</div>'
                    html +='<div class="no_text">'
                    html +='<p style="color:red;font-size:2rem;"><span style="font-size:0.9rem;">￥</span>'+dat.money+'</p>'
                    html +='<p style="color:#ccc;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">'+dat.name+'</p>'
                    html +='</div>'
                    html +='<div class="no_w">'
                    html +='<p style="font-size:0.9rem" class="dj" id="sy'+dat.id+'" title="'+dat.money+'" onclick="sy(this,'+dat.id+')">立即使用</p>'
                    html +='</div>'
                    html +='</div>'
                  }
                  $api.html(obj, html);

                }
              }else{//隐藏优惠卷
                $("#juan").css('display','none')
              }
              $("#juans").html(juannum)
              //  alert( JSON.stringify( ret ) );
            } else {
                //alert( JSON.stringify( err ) );
            }
        });

      }

      function sy(self,key) {

        var money = self.title
        pay_price = price - money
        $("#price").html(pay_price)
        juan_id = key
        msgcode('使用成功')
        $('.no_all').css('display','none')
      }

      function pay2() {

          $(this).unbind('click',pay2);

          api.ajax({
              url: SITE_URL+'cur_api/cur/getperpaydata',
              method: 'post',
              data: {
                  values: {
                      id: orderid,
                      money:pay_price,
                      juan_id:juan_id
                  }
              }
          },function(ret, err){
              if (ret) {
                  if(ret.error==200){

                      topay1(ret.data);

                  }else if(ret.error==220){
                      msgcode('支付成功')
                      setTimeout(function () {
                          api.openWin({
                              name: 'mycur',
                              url: './mycur.html',
                              pageParam: {

                              }
                          });
                      }, 1000)
                  }else{
                      msgcode('支付失败' + ret.error)
                  }

              } else {
                  msgcode('请检查网络1')
                  //alert( JSON.stringify( err ) );
              }
          });
      }

  function topay1(data) {

      var wxPayPlus = api.require('wxPayPlus');

      wxPayPlus.payOrder(data, function(ret, err) {
          if (ret.status) {
              //支付成功
              msgcode('支付成功')

              setTimeout(function () {
                  api.openWin({
                      name: 'mycur',
                      url: './mycur.html',
                      pageParam: {

                      }
                  });
              }, 1000)
          } else {

              alert('支付失败,' + err.code);
          }
      });
  }
        /*模拟测试*/
      function pay() {
                  api.ajax({
                      url: SITE_URL+'cur_api/cur/orderpay',
                      method: 'post',
                      data: {
                          values: {
                              id: orderid,
                              money:pay_price,
                              juan_id:juan_id
                          }
                      }
                  },function(ret, err){
                      if (ret) {
                          if(ret.error==200){
                              alert('支付成功');

                            api.sendEvent({
                                name: 'pay_ok',
                            });
                            api.sendEvent({
                                name: 'sc',
                            });
                            setTimeout(function () {
                              api.closeWin({

                              });

                            },500)
                              //end注释
                          }else{
                            msgcode('支付失败' + ret.error)
                          }
                      } else {
                        msgcode('请检查网络')
                          //alert( JSON.stringify( err ) );
                      }
                  });
      }

// 1支付宝0微信
      function set(type) {
        if(type==1){
          $("#wxpay").attr('src','../image/u25.png')
          $("#zfbpay").attr('src','../image/u24.png')
        }else if(type==0){
          $("#wxpay").attr('src','../image/u24.png')
          $("#zfbpay").attr('src','../image/u25.png')
        }
      }




  </script>
  </html>
